import React, { Component } from 'react'
import {Route, Switch, Redirect} from 'react-router-dom'
import About from '../About'
import Home from '../Home'
import Title from '../../components/Title'
import MyNavLink from '../../components/MyNavLink'

export default class Navigation extends Component {
  render() {
    return (
      <div>
        <Title/>
        <div className='list_group'>
          <ul>
            <li>
              <MyNavLink to='/home'>Home</MyNavLink>
            </li>
            <li>
              <MyNavLink to='/about'>About</MyNavLink>
            </li>
          </ul>
        </div>
        <div className='panel_bady'>
          {/* 注册路由 */}
          <Switch>
            {/* react 路由链接 Link 跳转 */}
            <Route path='/home' component={Home}/>
            <Route path='/about' component={About}/>
            {/* 重定向, 当没有匹配到以上路径时会默认展示 Redrect 中的路径 */}
            <Redirect to='/about' />
          </Switch>
        </div>
      </div>
    )
  }
}
